<template>
  <div class="emoji disinblock mr10">
    <!-- 表情按钮 -->
    <span ref="emoji" class="emoji disinblock cursor-pointer" @click="togglePanel">
    </span>
    <!-- 表情包div -->
    <div ref="emojiDialog">
        <ul class="emoji-dialog posi-ab" v-show="showEmojiFlag">
          <li class="emoji-li fl" v-for="item in emojiData" :key="item.key" @click='submitEmoji(item.text)'>
            <img class='emoji-img' :src=item.img :title=item.text>
          </li>
        </ul>
    </div>
  </div>
</template>

<script>
import emojiList from './data.js'
export default {
  name: 'emoji',
  props: ['commentEmoji'],
  data() {
    return {
      showEmojiFlag: false,
      emojiData: ''
    }
  },
  mounted() {
    this.emojiData = emojiList()
  },
  methods: {
    togglePanel() {
      this.showEmojiFlag ? this.hide() : this.show()
    },
    show() {
      this.showEmojiFlag = true
      document.addEventListener('click', this.hidePanel, false)
    },
    hide() {
      this.showEmojiFlag = false
      document.removeEventListener('click', this.hidePanel, false)
    },
    hidePanel(e) {
      if (!this.$refs.emoji.contains(e.target) && !this.$refs.emojiDialog.contains(e.target)) {
        this.hide()
      }
    },
    submitEmoji(text) {
      this.$emit('commentEmoji', text) 
    }
  }
}
</script>

<style lang='less' >
  .emoji {
    width: 18px;
    height: 18px;
    background: url('../../assets/icon.png');
  }
  .emoji {
    background-position: 45px -490px;
  }
  .emoji-dialog {
    left: -12px;
    width: 260px;
    height: 160px;
    background: url("../../assets/emtbg.png");
    padding: 17px 12px 10px 13px;
    .emoji-li {
      .emoji-img {
        width: 21px;
        height: 21px;
        border: 1px solid #fff;
        &:hover {
          border: 1px solid #2aa1d1;
          cursor: pointer;
        }
      }
    }
    
  }
</style>